<template>
  <div>
    <!--若属性show1为true 则显示第一个p标签-->
    <p v-if="state.show1">我是尼克陈</p>
    <!--若属性show2为false，则不显示第二个p标签-->
    <p v-if="state.show2">实战教程</p>
    <!--若属性show3为字符串'show'则通过表达式的形式显示template模板-->
    <template v-if="state.show3 == 'show'">
        <div>我是一个模板</div>
    </template>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup(){
    const state=reactive({
      show1:true, //布尔类型
      show2: false,//布尔类型
      show3: 'show'//字符串类型
    })
    //返回state给template使用
    return {state}
  }
}
</script>